<template>
	<view class="page-container">
	    <view class="form-box">
	      <view class="title">注册</view>
	      <view class="form-item">
	        <input
	          class="input"
	          type="text"
	          placeholder="请输入用户名"
	          v-model="username"
	        />
	      </view>
	      <view class="form-item">
	        <input
	          class="input"
	          type="password"
	          placeholder="请输入密码"
	          v-model="password"
	        />
	      </view>
	      <view class="form-item">
	        <input
	          class="input"
	          type="password"
	          placeholder="请确认密码"
	          v-model="confirmPassword"
	        />
	      </view>
	      <button class="register-btn" @click="handleRegister">注册</button>
	      <navigator url="/pages/login/Login" class="login-link">已有账号？去登录</navigator>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 username: '',
				 password: '',
				 confirmPassword: '',
			};
		},
		methods: {
			handleRegister(){
			if (!this.username || !this.password || !this.confirmPassword) {
			        uni.showToast({
			          title: '请输入完整信息',
			          icon: 'none',
			        });
			        return;
			      }
			      if (this.password !== this.confirmPassword) {
			        uni.showToast({
			          title: '两次密码不一致',
			          icon: 'none',
			        });
			        return;
			      }
			      uni.showLoading({
			        title: '注册中...',
			      });
			      setTimeout(() => {
			        uni.hideLoading();
			        uni.showToast({
			          title: '注册成功',
			        });
			
			        uni.navigateTo({
			          url: '/pages/components/login/login',
			        });
			      }, 1000);
			  },
		},
	};
</script>

<style>
.page-container {
  display: flex;
  justify-content: center; 
  align-items: center;     
  min-height: 100vh;       
  background-color: #f5f5f5;
  padding: 30px; 
  box-sizing: border-box;
}

.form-box {
  width: 100%;
  max-width: 350px; 
  padding: 35px 25px; 
  background-color: #fff;
  border: 1px solid #e0e0e0; 
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

.form-item {
  width: 100%;
  margin-bottom: 20px;
}

.input {
    height: 28px;
  	line-height: 28px;
  	font-size: 15px;
  	flex:1;
  	border: 1px solid #ddd;
  	border-radius: 1px;
  	box-sizing: content-box;
  	padding: 5px;
}

.register-btn {
  width: 100%;
  padding: 7px 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.login-link {
  font-size: 14px;
  color: #007aff;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-top: 15px;
}
</style>
